<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>明细页面</title>
    <!--1.引入bootstrap样式框架；-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <!--2.引入angularJS分页样式的框架；-->
    <link rel="stylesheet" href="angularjs/pagination.css">

    <link rel="stylesheet" href="layer/theme/default/layer.css">

    <!--3.引入bootstrap中的Jquery框架；-->
    <script src="bootstrap/js/jquery.min.js"></script>

    <link rel="stylesheet" href="bootstrap/css/bootstrap-datetimepicker.css">
    <script src="bootstrap/js/bootstrap-datetimepicker.min.js"></script>
    <script src="bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="bootstrap/js/bootstrap-datetimepicker.fr.js"></script>
    <!--4.引入bootstrap中的Js框架；-->
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular-route.js"></script>

    <!--<script src="//unpkg.com/angular-ui-router@0.4.2/release/angular-ui-router.js"></script>-->
    <!--6.引入AngularJS分布的JS框架-->
    <script src="angularjs/pagination.js"></script>

    <script src="layer/layer.js"></script>


    <!--9.定义自己写的 javascript 代码：-->
    <script>
        var app = angular.module('dealApp', ['pagination']);
        app.controller('dealController', function ($scope, $http) {
            $scope.paginationConf = {
                currentPage: 1,
                itemsPerPage: 5,
                totalItems: 100,
                perPageOptions: [5, 10, 15],
                onChange: function () {
                    console.log("表格变");
                    $scope.search();
                }
            };
            //zuul
            $http.post('http://localhost:12000/tran/ip').then(function (data) {  //正确请求成功时处理
                console.log(data)
                if (data.data.code == 403) {
                    window.location.href = "/login.html";
                }
            }).catch(function (result) { //捕捉错误处理
                console.info(result);
            });
            // $scope.getAll = function () {
            //     $http.post("/tDeal/all?index=" + $scope.paginationConf.currentPage + "&size=" + $scope.paginationConf.itemsPerPage + "&account=" + 1).success(function (data) {
            //         console.log(data);
            //         $scope.list = data.rows;
            //         $scope.paginationConf.totalItems = data.total;
            //     })
            // };

            //初始化日期插件 -- 选择到天
            $('#startTime').datetimepicker({
                format: 'yyyy-mm-dd',//显示格式
                todayHighlight: 1,//今天高亮
                minView: "month",//设置只显示到月份
                startView: 2,
                forceParse: 0,
                showMeridian: 1,
                autoclose: true,//选择后自动关闭
                language: 'zh-CN',
                weekStart: 1,
                clearBtn: true
                // todayBtn:  1,
                // autoclose: 1,
                // todayHighlight: 1,
                // startView: 2,
                // minView: 2,
                // forceParse: 0,
                // pickerPosition:'bottom-right'//日期插件弹出的位置
            }).on("changeDate", function () {
                $scope.selectTime = $scope.times[0].value;
                $('#endTime').datetimepicker('setStartDate', $("#startTime").val());
                console.log($("#startTime").val());
                console.log($scope.selectTime);
                $("#endTime").focus()
            });


            $('#endTime').datetimepicker({
                format: 'yyyy-mm-dd',//显示格式
                todayHighlight: 1,//今天高亮
                minView: "month",//设置只显示到月份
                startView: 2,
                forceParse: 0,
                showMeridian: 1,
                autoclose: true,//选择后自动关闭
                language: 'zh-CN',
                weekStart: 1,
                clearBtn: true
                // todayBtn:  1,
                // autoclose: 1,
                // todayHighlight: 1,
                // startView: 2,
                // minView: 2,
                // forceParse: 0,
                // pickerPosition:'bottom-right'//日期插件弹出的位置
            }).on("changeDate", function () {
                $scope.selectTime = $scope.times[0].value;
                $('#startTime').datetimepicker('setEndDate', $("#endTime").val());
                console.log($scope.selectTime);
                console.log($("#endTime").val());

            });

            $scope.times = [
                {time: "请选择", value: "-1"},
                {time: "当日", value: "0"},
                {time: "近一周", value: "7"},
                {time: "近一月", value: "30"},
                {time: "近三月", value: "90"},
                {time: "近六月", value: "180"},
            ];

            $scope.flows = [
                {flow: "请选择", value: "-1"},
                {flow: "收入", value: "1"},
                {flow: "支出", value: "0"},
                {flow: "全部", value: "2"}
            ];


            $scope.selectedTime = function () {
                $("#endTime").val("");
                $("#startTime").val("");
                console.log($scope.selectTime);
            };

            $scope.selectedFlow = function () {
                console.log($scope.condition);
            };

            $scope.search = function () {
                $http.post("http://localhost:12000/user/tDeal/search?index=" + $scope.paginationConf.currentPage + "&size=" + $scope.paginationConf.itemsPerPage +"&account=" + 1+
                    "&startTime=" + $("#startTime").val() + "&endTime=" + $("#endTime").val() + "&selectTime=" + $scope.selectTime +
                    "&condition=" + $scope.condition
                ).success(function (data) {
                    console.log(data);
                    $scope.list = data.rows;
                    $scope.paginationConf.totalItems = data.total;
                })
            };

        });
    </script>
</head>
<body ng-app="dealApp" ng-controller="dealController">
<div>
    <ol class="breadcrumb" style="margin-top: 0px;margin-bottom: 0;">
        <li><a >Home</a></li>
        <li><a >银行</a></li>
        <li><a href="index.html">返回首页</a></li>
    </ol>
</div>
<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h1>用户交易明细</h1>
        </div>
        <div class="panel-body">

            <label class="date-label-width">起止时间:</label>
            <input type="datetime" size="16" id="startTime" name="startTime" class="date-input-size date-minute-bgcolor"
                   value="" readonly>

            <label for="endTime">-</label>
            <input type="datetime" id="endTime" name="endTime" class="date-input-size date-minute-bgcolor" value=""
                   readonly>&nbsp;&nbsp;

            <label>时长选择：</label>
            <select ng-model="selectTime" ng-change="selectedTime()" ng-init="selectTime = times[0].value">
                <option ng-repeat="t in times" value="{{t.value}}">{{t.time}}</option>
            </select>&nbsp;&nbsp;

            <label>资金去向：</label>
            <select ng-model="condition" ng-change="selectedFlow()" ng-init="condition = flows[0].value">
                <option ng-repeat="f in flows" value="{{f.value}}">{{f.flow}}</option>
            </select>&nbsp;&nbsp;&nbsp;&nbsp;

            <a class="btn btn-success" type="button" ng-click="search()">查询</a>

            <table class="table table-bordered table-hover table-striped table-condensed text-center">
                <tr>
                    <td>序号</td>
                    <td>交易金额</td>
                    <td>资金流向</td>
                    <td>来源/去向</td>
                    <td>交易时间</td>
                </tr>
                <tr ng-repeat="d in list">
                    <td>{{$index + 1}}</td>
                    <td>{{d.tradingAmount}}</td>
                    <td ng-if="d.outputInput == 1">
                        收入
                    </td>
                    <td ng-if="d.outputInput == 0">
                        支出
                    </td>
                    <td ng-if="d.outputInput == 1">
                        来自{{d.reciprocalName}}
                    </td>
                    <td ng-if="d.outputInput == 0">
                        转出给{{d.reciprocalName}}
                    </td>
                    <td>{{d.tradingHour}}</td>
                </tr>
                <tr>
                    <td colspan="5">
                        <tm-pagination conf="paginationConf"></tm-pagination>
                    </td>
                </tr>
            </table>
        </div>
        <div class="panel-footer text-right">
            明细页面
        </div>
    </div>
</div>
</body>
</html>


